﻿//轮播Banner模板2
Vue.component('banner-slider-2', {
    props: ['floorData', 'imgBaseUrl'],
    template: '<div class="pagebuild-floor banner-slider-2">\
                    <div class="pagebuild-floor-title" v-if="floorData.titleImage">\
                        <img :src="imgBaseUrl + floorData.titleImage" />\
                    </div>\
                    <div class="mui-slider slider">\
                        <div class="mui-slider-group mui-slider-loop">\
                            <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->\
                            <div class="mui-slider-item mui-slider-item-duplicate" v-if="floorData.floorItems.length > 0">\
                                <img :src="imgBaseUrl + floorData.floorItems[floorData.floorItems.length-1].imageUrl">\
						    </div>\
                            <div class="mui-slider-item" v-for="item in floorData.floorItems" @tap="$emit(\'linktap\', item)">\
                                <img :src="imgBaseUrl + item.imageUrl" />\
                            </div>\
                            <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->\
                            <div class="mui-slider-item mui-slider-item-duplicate" v-if="floorData.floorItems.length > 0">\
                                <img :src="imgBaseUrl + floorData.floorItems[0].imageUrl">\
						    </div>\
                        </div>\
                        <div class="mui-slider-indicator">\
                            <div class="mui-indicator" v-for="item in floorData.floorItems"></div>\
                        </div>\
                    </div>\
                    <div class="pagebuild-floor-bottom" v-if="floorData.bottomImage">\
                        <img :src="imgBaseUrl + floorData.bottomImage" />\
                    </div>\
                </div>'
});

//图标图标模板1(4列)
Vue.component('icons-image-1', {
    props: ['floorData', 'imgBaseUrl'],
    template: '<div class="pagebuild-floor clearfix icons-image-1">\
                    <div class="pagebuild-floor-title" v-if="floorData.titleImage">\
                        <img :src="imgBaseUrl + floorData.titleImage" />\
                    </div>\
                    <div class="img-item-4" v-for="item in floorData.floorItems"  @tap="$emit(\'linktap\', item)">\
                        <img :src="imgBaseUrl + item.imageUrl" />\
                    </div>\
                    <div class="pagebuild-floor-bottom" v-if="floorData.bottomImage">\
                        <img :src="imgBaseUrl + floorData.bottomImage" />\
                    </div>\
                </div>'
});

//图标图标模板2(3列)
Vue.component('icons-image-2', {
    props: ['floorData', 'imgBaseUrl'],
    template: '<div class="pagebuild-floor clearfix icons-image-2">\
                    <div class="pagebuild-floor-title" v-if="floorData.titleImage">\
                        <img :src="imgBaseUrl + floorData.titleImage" />\
                    </div>\
                    <div class="img-item-3" v-for="item in floorData.floorItems"  @tap="$emit(\'linktap\', item)">\
                        <img :src="imgBaseUrl + item.imageUrl" />\
                    </div>\
                    <div class="pagebuild-floor-bottom" v-if="floorData.bottomImage">\
                        <img :src="imgBaseUrl + floorData.bottomImage" />\
                    </div>\
                </div>'
});

//图标图标模板2(3列)
Vue.component('banner-image-1', {
    props: ['floorData', 'imgBaseUrl'],
    template: '<div class="pagebuild-floor banner-image-1">\
                    <div class="pagebuild-floor-title" v-if="floorData.titleImage">\
                        <img :src="imgBaseUrl + floorData.titleImage" />\
                    </div>\
                    <div class="img-item" v-for="item in floorData.floorItems"  @tap="$emit(\'linktap\', item)">\
                        <img :src="imgBaseUrl + item.imageUrl" />\
                    </div>\
                    <div class="pagebuild-floor-bottom" v-if="floorData.bottomImage">\
                        <img :src="imgBaseUrl + floorData.bottomImage" />\
                    </div>\
                </div>'
});

//轮播Banner模板1(左右有间隔)
Vue.component('banner-slider-1', {
    props: ['floorData', 'imgBaseUrl'],
    template: '<div class="pagebuild-floor banner-slider-1">\
                    <div class="pagebuild-floor-title" v-if="floorData.titleImage">\
                        <img :src="imgBaseUrl + floorData.titleImage" />\
                    </div>\
                    <div class="mui-slider slider">\
                        <div class="mui-slider-group">\
                            <div class="mui-slider-item" v-for="item in floorData.floorItems"  @tap="$emit(\'linktap\', item)">\
                                <img :src="imgBaseUrl + item.imageUrl" />\
                            </div>\
                        </div>\
                        <div class="mui-slider-indicator">\
                            <div class="mui-indicator" v-for="item in floorData.floorItems"></div>\
                        </div>\
                    </div>\
                    <div class="pagebuild-floor-bottom" v-if="floorData.bottomImage">\
                        <img :src="imgBaseUrl + floorData.bottomImage" />\
                    </div>\
                </div>'
});

//商品列表模板1
Vue.component('goods-list-1', {
    props: ['floorData', 'imgBaseUrl'],
    template: '<div class="pagebuild-floor goods-list-1 clearfix">\
                    <div class="pagebuild-floor-title" v-if="floorData.titleImage">\
                        <img :src="imgBaseUrl + floorData.titleImage" />\
                    </div>\
                    <ul>\
                        <li v-for="item in floorData.floorItems" v-if="item.objectData.goodsName"  @tap="$emit(\'linktap\', item)">\
                            <img :src="imgBaseUrl + item.objectData.imageUrl" />\
                            <h4>{{ item.objectData.goodsName }}</h4>\
                            <span class="price">￥{{ item.objectData.sellingPrice.toFixed(2) }}</span>\
                        </li>\
                    </ul>\
                    <div class="pagebuild-floor-bottom" v-if="floorData.bottomImage">\
                        <img :src="imgBaseUrl + floorData.bottomImage" />\
                    </div>\
                </div>'
});

//商品列表模板2
Vue.component('goods-list-2', {
    props: ['floorData', 'imgBaseUrl'],
    template: '<div class="pagebuild-floor goods-list-2 clearfix">\
                    <div class="pagebuild-floor-title" v-if="floorData.titleImage">\
                        <img :src="imgBaseUrl + floorData.titleImage" />\
                    </div>\
                    <ul>\
                        <li v-for="item in floorData.floorItems" v-if="item.objectData.goodsName"  @tap="$emit(\'linktap\', item)">\
                            <img :src="imgBaseUrl + item.objectData.imageUrl" />\
                            <div class="right">\
                                <h4>{{ item.objectData.goodsName }}</h4>\
                                <h5>{{ item.objectData.promotionDesc }}</h5>\
                                <span class="price">￥{{ item.objectData.sellingPrice.toFixed(2) }}</span>\
                                <span class="btn-buy">立即购买</span>\
                            </div>\
                        </li>\
                    </ul>\
                    <div class="pagebuild-floor-bottom" v-if="floorData.bottomImage">\
                        <img :src="imgBaseUrl + floorData.bottomImage" />\
                    </div>\
            </div>'
});

//商品列表模板3
Vue.component('goods-list-3', {
    props: ['floorData', 'imgBaseUrl'],
    template: '<div class="pagebuild-floor goods-list-3 clearfix">\
                    <div class="pagebuild-floor-title" v-if="floorData.titleImage">\
                        <img :src="imgBaseUrl + floorData.titleImage" />\
                    </div>\
                    <ul>\
                        <li v-for="item in floorData.floorItems" v-if="item.objectData.goodsName"  @tap="$emit(\'linktap\', item)">\
                            <img :src="imgBaseUrl + item.objectData.imageUrl" />\
                            <h4>{{ item.objectData.goodsName }}</h4>\
                            <span class="price">￥{{ item.objectData.sellingPrice.toFixed(2) }}</span>\
                        </li>\
                    </ul>\
                    <div class="pagebuild-floor-bottom" v-if="floorData.bottomImage">\
                        <img :src="imgBaseUrl + floorData.bottomImage" />\
                    </div>\
            </div>'
});

//商品列表模板4
Vue.component('goods-list-4', {
    props: ['floorData', 'imgBaseUrl'],
    template: '<div class="pagebuild-floor goods-list-4 clearfix">\
                    <div class="pagebuild-floor-title" v-if="floorData.titleImage">\
                        <img :src="imgBaseUrl + floorData.titleImage" />\
                    </div>\
                    <ul>\
                        <li v-for="item in floorData.floorItems" v-if="item.objectData.goodsName"  @tap="$emit(\'linktap\', item)">\
                            <img :src="imgBaseUrl + item.objectData.imageUrl" />\
                            <h4>{{ item.objectData.goodsName }}</h4>\
                            <span class="price">￥{{ item.objectData.sellingPrice.toFixed(2) }}</span>\
                        </li>\
                    </ul>\
                    <div class="pagebuild-floor-bottom" v-if="floorData.bottomImage">\
                        <img :src="imgBaseUrl + floorData.bottomImage" />\
                    </div>\
            </div>'
});

//商品列表模板5
Vue.component('goods-list-5', {
    props: ['floorData', 'imgBaseUrl'],
    template: '<div class="pagebuild-floor goods-list-5 clearfix">\
                    <div class="pagebuild-floor-title" v-if="floorData.titleImage">\
                        <img :src="imgBaseUrl + floorData.titleImage" />\
                    </div>\
                    <ul>\
                        <li v-for="(item,index) in floorData.floorItems"  @tap="$emit(\'linktap\', item)">\
                            <img :src="imgBaseUrl + item.imageUrl" v-if="index % 2 == 1"  />\
                            <img :src="imgBaseUrl + item.objectData.imageUrl" v-if="index % 2 == 0 && item.objectData.goodsName" />\
                            <h4 v-if="index % 2 == 0 && item.objectData.goodsName">{{ item.objectData.goodsName }}</h4>\
                            <span class="price" v-if="index % 2 == 0 && item.objectData.goodsName">￥{{ item.objectData.sellingPrice.toFixed(2) }}</span>\
                        </li>\
                    </ul>\
                    <div class="pagebuild-floor-bottom" v-if="floorData.bottomImage">\
                        <img :src="imgBaseUrl + floorData.bottomImage" />\
                    </div>\
            </div>'
});